<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3344811_x406v5hhu78.css">
    <title>Document</title>
</head>

<body>

    <div id="content">
        <div id="header">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../../assets/imgs/index-swiper-bg1.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../assets/imgs/index-swiper-bg2.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../assets/imgs/index-swiper-bg3.jpg" alt="">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>


            </div>

        </div>
        <div id="main">
            <div class="content1">
                <div class="rank">
                    <div class="dya"> 今日排名</div>
                    <div class="img"></div>
                    <div class="num">9</div>
                </div>
                <div class="punch">
                    <div class="punchs"> 累计打卡
                        <span class="day">23</span>天</div>
                    <div class="imgs"></div>
                    <div class="Punchintoday">今日打卡</div>
                </div>
            </div>
        </div>
        <div class="content2">
            <div class="motionData">
                <div class="sports">运动数据</div>
            </div>
            <div class="sportsBadge">
                <div class="badge"> 累计运动徽章</div>
                <div class="imgss"></div>
                <div class="nums">3 </div>
                <span class="mei">枚</span>


            </div>
        </div>
        <div class="content3">
            <div>课程训练</div>
        </div>
        <div class="content4">
            <div>户外跑步</div>
        </div>
    </div>
    </div>

    <!-- <div id="content">
        <div id="nav">
            <div class=" dynamicStatement ">动态列表</div>
            <div class="AddDynamic">添加动态</div>
        </div>
        <div id="substance">
            <div class="recommend">推荐课程</div>
            <div class="chocolate">
                <div class="vd"></div>
                <div class="chotext1">巧克力腹肌雕刻</div>
                <div class="chotext2">一场痛快淋漓的父级撕裂体验, 虐出你的巧克力腹肌 !</div>
            </div>
            <div id="user">
                <div class="UserAvatar">
                    <div class="ava"></div>
                    <div class="username">用户名：
                        <div>xx省xx市</div>
                    </div>
                </div>
                <div class="usertext">有这么一bai句话：“生命在于运动。du”没zhi错，运动不但可以dao锻炼我们的身体， 还能充实我们的生活，愉悦我们的心情。我最喜欢的一项运动就是晨跑。
                    <span>...全部</span>
                </div>
                <div class="picture">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
            </div>
         



            <div id="user"></div>
            <div id="user"></div>

        </div>




    </div> -->
    <!-- <div id="content">
        <div id="PersonalData">
            <div class="avatar"></div>
            <div class="userName">用户名</div>
            <div class="signature">个性签名: XXXXXXXXXXXXXXXXXXXXXXXXXX</div>
            <i class="iconfont icon-chuangxiangbaiyinvip"></i>

        </div>
        <div id="MotionData">
            <i class="iconfont icon-shujutu"></i>
            <i class="iconfont icon-youjiantou1"></i>
            <div class="MotionDatatitle">运动数据</div>
            <div class="motionData">
                <div class="motionDataleft">
                    <div class="motionDataleft-title">总运动</div>
                    <div class="motionDataleft-text">8888分钟</div>
                </div>
                <div class="border"></div>
                <div class="motionDataright">
                    <div class="motionDataright-title">总运动</div>
                    <div class="motionDataright-text">8888分钟</div>
                </div>
            </div>
        </div>
        <div id="SportsBadge">
            <i class="iconfont icon-huizhang"></i>
            <i class="iconfont icon-youjiantou1"></i>
            <div class="SportsBadgetitle">我的运动徽章</div>
            <div class="sportsBadge">
                <div class="sportsBadgeleft"></div>
                <div class="sportsBadgecenter"></div>
                <div class="sportsBadgeright"></div>
            </div>
        </div>
        <div id="SignOut">
            <div class="SignOutbtn">退出登录</div>
        </div>
        <div id="BottomNav"></div>
    </div> -->


    <footer id="Bbox">
      
    </footer>


    <!-- <footer> 
        <ul>

            <li></li>
            <i class="iconfont icon-shouye ">
                <span>首页</span>
            </i>
            </li>
            <li></li>
            <i class="iconfont icon-diqiu">
                <span>运动</span>
            </i>
            </li>
            <li></li>
            <i class="iconfont icon-shouye">
                <span>圈子</span>
            </i>
            </li>
            <li></li>
            <i class="iconfont icon-shouye">
                <span>我的</span>
            </i>
            </li>

        </ul>

    </footer> -->


    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
</body>

</html>